<template>
  <Card>
    <span slot="title">组织机构管理</span>
    <div slot="content">
      <div class="table_content">
        <h1 class="table_content_head">请选择申报资格</h1>
        <div class="form">
          <el-table
            size="mini"
            :data="tableData"
            style="width: 100%"
            stripe
            select-on-indeterminate
            :header-cell-style="headerStyle"
          >
            <el-table-column label="#" width="55">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.num }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申报资格">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.qualification
                }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_tools">
            <!-- <we-button size="small" @click="toggleSelection"
                >取消全选</we-button
              > -->
            <we-pagination :total="pagination.total"></we-pagination>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WePagination from "@/components/WePagination";
export default {
  components: {
    Card,
    WePagination,
  },
  data() {
    return {
      tableData: [
        { num: 1, qualification: "水利工程正高级" },
        { num: 2, qualification: "水利工程副高级" },
        { num: 3, qualification: "经济副高级" },
      ],
      // 分页数据
      pagination: {
        total: 30,
      },
    };
  },
  methods: {
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
  },
};
</script>

<style lang="less" scoped>
.table {
  border-radius: 5px;
  margin: 50px 12px;
  position: relative;
}
.table_title {
  background-color: #f9f9f9;
  height: 60px;
  padding-left: 18px;
  box-sizing: border-box;
  line-height: 60px;
}
.table_content_head {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form {
  margin-bottom: 50px;
  .table_tools {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
